<template>
	<div class='fx'>
		<Input :type='mode' :rows='rows' v-model:value='modelValue' :readOnly='readOnly' :p='p' :size='size' :disabled='disabled' @input='onInput' />
		<Button :label='btnText' class='ml10' :size='size' @click='onClick' />
	</div>
</template>

<script>
	import { ref, watch } from 'vue'
	const Input 		= $.lazy(()=>import('@antd/form/input.vue'))
	const Button 		= $.lazy(()=>import('@antd/button.vue'))
	
	export default{
		components:{ Input, Button},
		props:{
			value 		: String,
			name 		: String,
			label 		: String,
			form 		: Object,
			p			: { type:String },
			readOnly 	: Boolean,
			disabled 	: Boolean,
			rows		: { type:Number, default: 4},
			btnText 	: { type:String, default:'选择'},
			size 		: [Number, String],
			mode 		: { type:String, default:'textarea'}
		},
		emits:{
			change:null,
			blur:null,
			click:null,
			'update:value':null
		},
		setup(props, ctx){
			const modelValue = ref(props.value)
			
			watch(()=>props.value, value => modelValue.value = value )
			
			return {
				modelValue,
				onInput : value => {
					modelValue.value = value
					ctx.emit('update:value', value)
					ctx.emit('change', $fn.getFormFormat({...props, formType:'text' }))
				},
				onClick: () => ctx.emit('click', modelValue.value)
			}
		}
	}
</script>